page {
	.content-baisc-layout {
		.header-area {
			z-index: 2;
			position: relative;

			.sticky-bg {
				background: url(https://resource.lanbaozixun.com/uploads/images/202507252021485f2d84338.png) no-repeat;
				background-size: 100% 430px;
				// #ifdef H5
				background-position: 0 -80px;
				// #endif

				@keyframes logo-animation {
					0% {
						opacity: 0;
						transform: translateX(30px);
					}

					55% {
						opacity: 0;
						transform: translateX(30px);
					}

					63% {
						opacity: 1;
						transform: translateX(0px);
					}

					99% {
						opacity: .9;
						transform: translateX(0px);
					}

					100% {
						opacity: 0;
						transform: translateX(0px);
					}
				}

				.page-logo {
					opacity: 0;
					top: 20rpx;
					height: 40rpx;
					width: 130rpx;
					position: absolute;
					left: 20px;
					animation: logo-animation 6s linear infinite;
				}

				@keyframes cliptext {
					0% {
						opacity: 1;
						background-position: 0 0;
					}

					50% {
						opacity: 1;
						background-position: 140rpx 0;
					}

					55% {
						opacity: 0;
						background-position: 140rpx 0;
					}

					100% {
						opacity: 0;
						background-position: 0 0;
					}
				}


				.page-text-logo {
					letter-spacing: 3rpx;
					background: #262a83 -webkit-linear-gradient(-15deg, #262a83 0rpx, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), #262a83 20rpx) no-repeat;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					-webkit-animation: cliptext 6s linear infinite;
					font-size: 21px;
					font-weight: bold;
					opacity: 0;
				}

				.header-customer-service {
					margin-top: 20rpx;
					height: 36rpx;
				}

				.search-area {
					padding: 6px 22rpx;

					.search-content {
						color: #C8C9CC;
						padding: 10rpx 32rpx;
						border-radius: 100px;
						background: rgba(255, 255, 255, 0.9);

						@keyframes shake-animation {
							0% {
								transform: rotate(0deg);
							}

							25% {
								transform: rotate(-15deg);
							}

							50% {
								transform: rotate(15deg);
							}

							75% {
								transform: rotate(-15deg);
							}

							100% {
								transform: rotate(0deg);
							}
						}

						.icon {
							width: 30rpx;
							animation: shake-animation 1s infinite;
						}
					}
				}
			}


		}


		// 页面顶部背景
		.page-top-bg {
			width: 100vw;
			background: url('https://resource.lanbaozixun.com/uploads/images/202507252021485f2d84338.png') no-repeat 100%;
			background-size: 100% 430px;
			// #ifdef H5
			height: 260px;
			background-position: 0 -170px;
			// #endif
			// #ifndef H5
			height: 340px;
			background-position: 0 -90px;
			// #endif
			position: relative;
			.click-area{
				left: 35.5%;
				width: 30%;
				height: 74rpx;
				bottom: 0;
				position: absolute;
				border-radius: 100rpx;
				background: transparent;
			}
		}

		// 页面顶部菜单区域
		.page-top-nav-area {
			top: 90px;
			z-index: 1;
			width: 100vw;
			position: absolute;
		}

		.nav {
			position: relative;
			border-radius: 14rpx;

			.nav-item {
				width: 20%;
				margin-top: 20rpx;

				&:nth-child(n+6) {
					.nav-icon {
						width: 54rpx;
						height: 54rpx;
					}

				}

				.nav-icon {
					width: 72rpx;
					height: 72rpx;
				}

				.name {
					color: #666666;
					font-weight: 300;
					margin-top: 10rpx;
				}
			}

			.dots {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 20rpx;
				display: flex;

				.dot {
					width: 10rpx;
					height: 6rpx;
					border-radius: 6rpx;
					margin-right: 10rpx;
					background-color: rgba(255, 44, 60, 0.4);

					&.active {
						width: 20rpx;
						background-color: $-color-primary;
					}
				}
			}
		}

		.activity-area {
			border-radius: 20rpx;
			padding-bottom: 24rpx !important;
			background: linear-gradient(180deg, #EBF7FF 0, #FFFFFF 20%);




			.title {
				width: 80rpx;
				height: 46rpx;
			}

			.gray {
				display: grid;
				grid-gap: 0 20rpx;

				grid-template-columns: repeat(3, 1fr);
			}
		}

	}

	@keyframes showpartneranimation {
		0% {
			right: -60rpx;
		}

		100% {
			right: 37rpx;
		}
	}

	

	.partner-area {
		width: 160rpx;
		position: fixed;
		bottom: 20%;
		right: 37rpx;
		z-index: 1999;
		animation: showpartneranimation 1s linear forwards;

		.close-btn {
			position: relative;
			right: -50rpx;
			top: -26rpx;
			z-index: 2;
		}

		.partner {
			width: 160rpx;
			position: fixed;
		}
	}
}

@keyframes partneranimation {
		0% {
			right: 0;
		}

		100% {
			right: -60rpx;
		}
	}

	.partner-hide {
		animation: partneranimation 1s linear forwards !important;
	}
	@keyframes footeranimation {
			0% {
				bottom: 0;
			}
	
			100% {
				bottom: -60rpx;
			}
		}
	
		.footer-hidden {
			animation: footeranimation 1s linear forwards !important;
		}	
	.hidden{
		display: none !important
	}
	
	.footer{
		display: grid;
		grid-template-columns: repeat(4,1fr);
		gap: 20rpx;
		margin-top: 20rpx;
	}
	
	.icon-60-60{
			width: 60rpx;
			height: 60rpx;
		}
		
		.icon-70-51{
			width: 70rpx;
			height: 51rpx;
		}
		
		.icon-64-55{
			width: 64rpx;
			height: 55rpx;
		}
		
		.icon-59-59{
			width: 59rpx;
			height: 59rpx;
		}